<!--
 * @Descripttion: 图片预览组件
 * @version: 
 * @Author: mmzhang
 * @Date: 2021-07-21 17:31:34
 * @LastEditTime: 2022-01-11 13:27:10
-->
<template>
  <!--大图-->
  <Modal v-model="showModal" title="" :footer-hide="true" class="preview-modal" width="100%">
    <div class="box" @click="hide">
      <video class="vied" controls="controls" v-if="showModal" :src="videoUrl" >
        您的浏览器不支持 video 标签
      </video>
    </div>
  </Modal>
</template>
<script>
  export default {
    name: 'previewVideo',
    props: ['videoUrl'],
    data() {
      return {
        showModal: false,
      }
    },

  
    methods: {
      show() {
        this.showModal = true
      },
     
      hide() {
        this.showModal = false
      },
    },
  }
</script>
<style lang="scss" scoped>
  .preview-modal {
    ::v-deep .ivu-modal {
      width: 100%;
      height: 100%;
      top: 0;
    }

    ::v-deep .ivu-modal {
      position: fixed;

      .ivu-modal-close {
        z-index: 99999;

        .ivu-icon-ios-close {
          font-size: 50px;
          font-weight: bolder;
          color: #fff;
        }
      }
    }

    ::v-deep .ivu-modal-content {
      width: 100%;
      height: 100%;
      background: rgba(51, 51, 51, 0);
      box-shadow: 0 0 0 rgb(0, 0, 0);
    }

    ::v-deep .ivu-modal-body {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .box {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .large-img {
      z-index: 999;
      position: absolute;
      cursor: pointer;
      margin: auto;
      max-height: 100%;
      max-width: 100%;
    }

    .operate-icon {
      z-index: 999;
      display: flex;
      justify-content: space-between;
      position: fixed;
      bottom: 100px;
      width: 400px;
      border-radius: 10px;
      text-align: center;
      background-color: rgba(51, 51, 51, 0.6);
    }

    .left-icon {
      transform: rotateY(180deg)
    }
  }
  .vied{
    max-width:80%;
    max-height: 80%;
  }
</style>